<div class="layui-body">
  <div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div class="layui-row content-body place-holder">
      <!-- 表单上面的按钮 -->
      <div class="lay-col-lg12">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <!-- 顶部搜索 -->
            <div class="layui-inline">
              <div class="layui-input-inline" style="width: 100px;">
                <input value="添加组" type=”button” class="layui-btn" lay-submit id="addgroup"">
              </div>
            </div>
            <!-- 顶部搜索END -->

          </div>
        </form>

        <script type=" text/html" id="barDemo">
                <div class="layui-clear-space">
                  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                  <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
                </div>
                </script>
              </div>


              <table class="layui-hide" id="ID-table-demo-data"></table>
              <script>
                layui.use('table', function() {
                  var table = layui.table;
                  var laypage = layui.laypage;
                  //数据渲染
                  var inst = table.render({

                    elem: '#ID-table-demo-data',
                    cols: [
                      [ //标题栏
                        {
                          field: 'id',
                          title: 'ID'
                        },
                        {
                          field: 'groupname',
                          title: '组名'
                        },
                        {
                          fixed: 'right',
                          title: '操作',
                          width: 134,
                          minWidth: 125,
                          toolbar: '#barDemo'
                        }
                      ]
                    ],
                    url: '/admin/api/grouplist.php',
                    method: 'post',
                    toolbar: '#toolbarDemo',
                    parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                      // console.log("成功" + res.code + ";==" + res.msg + ";" + res.count);
                      return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                      };
                    },
                    page: true,
                    limit: 5,
                    limits: [5, 10, 20, 30],
                  });
                  table.on('tool(ID-table-demo-data)', function(obj) {
                    var data = obj.data; // 得到当前行数据
                    var dataCache = obj.dataCache; // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
                    var index = obj.index; // 得到当前行索引
                    var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
                    var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
                    var options = obj.config; // 获取当前表格基础属性配置项
                    var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
                    //console.log(obj); // 查看对象所有成员

                    // 根据 lay-event 的值执行不同操作
                    if (obj.event === 'edit') {
                      layer.open({
                        title: '编辑 - id:' + data.id,
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">是否确认修改ID为' + data.id + '的组名？<br><form action="/admin/api/updatagroup.php" method="post"> <label for="Password">当前账户密码：</label><input type="password" id="Password" name="Password" required> <br><label for="newname">新组名：</label><input type="text" id="newname" name="newname" required><br> <input type="hidden" name="uid" value=' + data.id + '><button type="submit" class="layui-btn layui-btn-radius">确认修改</button></form><form action="/admin/lsysg.php" method="get"><button type="submit" class="layui-btn layui-btn-radius">取消修改</button></form></div>'
                      });
                    } else {
                      layer.open({
                        title: '编辑 - id:' + data.id,
                        type: 1,
                        area: ['50%', '50%'],
                        content: '<div style="padding: 16px;">是否确认删除ID为' + data.id + '的组？<br><form action="/admin/api/delgroup.php" method="post"><label for="Password">当前账户密码：</label><input type="password" id="Password" name="Password" required> <br><input type="hidden" name="uid" value=' + data.id + '><button type="submit" class="layui-btn layui-btn-radius">确认删除</button></form><form action="/admin/lsysg.php" method="get"><button type="submit" class="layui-btn layui-btn-radius">取消删除</button></form></div>'
                      });
                    }
                  });
                });
                // form.on('submit(search_keyword)', function(data) {
                //   let name = data.field.keyword; // 获得表单字段
                //   // 执行搜索重载
                //   table.render({
                //     elem: '#ID-table-demo-data',
                //     cols: [
                //       [ //标题栏
                //         {
                //           field: 'id',
                //           title: 'ID'
                //         },
                //         {
                //           field: 'groupname',
                //           title: '组名'
                //         },
                //         {
                //           field: 'grade',
                //           title: '级别'
                //         },
                //         {
                //           fixed: 'right',
                //           title: '操作',
                //           width: 134,
                //           minWidth: 125,
                //           toolbar: '#barDemo'
                //         }
                //       ]
                //     ],
                //     url: '/bishe/db/searchUsername.php',
                //     where: {
                //       name: name
                //     },
                //     method: 'post',
                //     parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                //       console.log("成功" + res.code + ";==" + res.msg + ";" + res.count);
                //       return {
                //         "code": res.code, //解析接口状态
                //         "msg": res.msg, //解析提示文本
                //         "count": res.count, //解析数据长度
                //         "data": res.data //解析数据列表
                //       };
                //     },
                //     page: true,
                //     limit: 5,
                //     limits: [5, 10, 20, 30],
                //   })
                //   layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
                //   return false; // 阻止默认 form 跳转
                // });
                $("#addgroup").click(function() {
                  console.log("按钮点击测试")
                  layer.open({
                    type: 1, // page 层类型
                    area: ['500px', '300px'],
                    title: '添加用户组',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '<div style="padding: 16px;">请输入要添加的组名。<br><form action="/admin/api/addgroup.php" method="post"> <label for="Password">当前账户密码：</label><input type="password" id="Password" name="Password" required> <br><label for="newgroup">新组名：</label><input type="text" id="newgroup" name="newgroup" required><br> <input type="hidden" name="uid" value=""><button type="submit" class="layui-btn layui-btn-radius">确认修改</button></form><form action="/admin/lsysg.php" method="get"><button type="submit" class="layui-btn layui-btn-radius">取消修改</button></form></div>'
                  });
                })
              </script>
            </div>